﻿@{
	ViewBag.Title = "人力资源档案查询";
}
<script src="~/lib/vue/dist/vue.global.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>
<div id="app">

	<font color="black">您正在做的业务是：人力资源--人力资源档案管理--人力资源档案{{kt}} </font><br />

	<el-affix :offset="40">

		<input type="button" value="查询" v-on:click="cx()" />

	</el-affix>


	<table :model="khbh" class="tableEdit">
		<tr>
			<th>
				请选择员工所在I级机构
			</th>
			<td>
				<select v-model="khbh.FirstKindName" size="5" id="firstKind" v-on:change="CFSKName()">
					<!-- 默认选项 -->
					<option value="">全部</option>
					<!-- 动态生成的选项 -->
					<option v-for="option in firstKindOptions"
							:key="option.firstKindId"
							:value="option.firstKindName">
						{{ option.firstKindName }}
					</option>
				</select>

			</td>


		</tr>

		<tr>
			<th>请选择员工所在II级机构</th>
			<td>
				<select v-model="khbh.SecondKindName" size="5" id="firstKind" v-on:change="CFTKName()">
					<!-- 默认选项 -->
					<option value="">全部</option>
					<!-- 动态生成的选项 -->
					<option v-for="option in aw"
							:key="option.secondKindId"
							:value="option.secondKindName">
						{{ option.secondKindName }}
					</option>
				</select>

			</td>

		</tr>

		<tr>
			<th>请选择员工所在III级机构</th>
			<td>
				<select v-model="khbh.ThirdKindName" size="5" id="firstKind">
					<!-- 默认选项 -->
					<option value="">全部</option>
					<!-- 动态生成的选项 -->
					<option v-for="option in sanji"
							:key="option.thirdKindId"
							:value="option.thirdKindName">
						{{ option.thirdKindName }}
					</option>
				</select>
			</td>
		</tr>

		<tr>
			<th>请选择员工职位分类</th>
			<td>
				<select v-model="khbh.HumanMajorKindId" size="5" id="firstKind" v-on:change="CMName()">
					<!-- 默认选项 -->
					<option value="">全部</option>
					<!-- 动态生成的选项 -->
					<option v-for="option in zwfl"
							:key="option.majorKindId"
							:value="option.majorKindName">
						{{ option.majorKindName }}
					</option>
				</select>
			</td>
		</tr>

		<tr>
			<th>请选择员工职位名称</th>
			<td>
				<select v-model="khbh.HumanMajorKindName" size="5" id="firstKind">
					<!-- 默认选项 -->
					<option value="">全部</option>
					<!-- 动态生成的选项 -->
					<option v-for="option in zwmc"
							:key="option.majorId"
							:value="option.majorName">
						{{ option.majorName }}
					</option>
				</select>
			</td>
		</tr>

		<tr>
			<th>请输入建档时间</th>
			<td colspan="2">
				<el-date-picker v-model="khbh.deadline" type="datetime" style="width: 200px;"></el-date-picker>至<el-date-picker v-model="khbh.shijian" type="datetime" style="width: 200px;"></el-date-picker>(YYY-MM-DD)
			</td>
		</tr>
	</table>



	@* 使用Drawer抽屉显示数据*@
	<el-drawer v-model="drawer" title="" size="56%">

		<el-table :data="tableData" style="width: 100%">
			<!-- 表格列 -->
			<el-table-column fixed prop="humanId" width="130" label="档案编号"></el-table-column>
			<el-table-column prop="humanName" label="姓名"></el-table-column>
			<el-table-column prop="humanSex" label="性别"></el-table-column>
			<el-table-column prop="firstKindName" width="80" label="I级机构"></el-table-column>
			<el-table-column prop="secondKindName" width="90" label="II级机构"></el-table-column>
			<el-table-column prop="thirdKindName" width="90" label="III级机构"></el-table-column>
			<el-table-column prop="humanMajorKindName" width="90" label="职位分类"></el-table-column>
			<el-table-column prop="humanMajorName" width="90" label="职位名称"></el-table-column>

			<el-table-column fixed="right" label="变更" v-if="bg">
				<!-- 自定义操作列 -->
				<template #default="scope">
					<el-button link type="primary" size="small" v-on:click="update(scope.row)">变更</el-button>
				</template>
			</el-table-column>

			<el-table-column fixed="right" label="删除" v-if="sck">
				<!-- 自定义操作列 -->
				<template #default="scope">
					<el-button link type="primary" size="small" v-on:click="sc(scope.row)">删除</el-button>
				</template>
			</el-table-column>

			<el-table-column fixed="right" label="恢复" v-if="huk">
				<!-- 自定义操作列 -->
				<template #default="scope">
					<el-button link type="primary" size="small" v-on:click="huifu(scope.row)">变更</el-button>
				</template>
			</el-table-column>

		</el-table>
	</el-drawer>
</div>



<script type="text/javascript">
	const { createApp, ref, reactive, onMounted, computed, onBeforeUnmount } = Vue
	var app = createApp({
		setup() {

			let tableData = ref([]);
			const drawer = ref(false);
			const bg = ref(false);
			const sck = ref(false);
			const huk = ref(false);
			const kt = ref("查询");

			const dialogVisible = ref(false);

			const khbh = ref({
				HumanHomephone: "",   //家庭电话
				FirstKindName: "", //I级机构
				SecondKindName: "", //II级机构
				ThirdKindName: "",//III级机构
				HumanMajorKindId: "",//职位分类
				HumanMajorKindName: "",//职位名称
				deadline: "",
				shijian: ""

			})

			

			//如果查到了数据不为空就打开抽屉
			function cx() {
				//如果查询条件全部为空则查询全部
				if (!this.khbh.HumanMajorKindId && !this.khbh.FirstKindName && !this.khbh.SecondKindName && !this.khbh.ThirdKindName && !this.khbh.HumanMajorKindName && !this.khbh.deadline && !this.khbh.shijian) {
					fill();
					return;
				}
				axios.get('/HF/GetHFs', {
					params: {
						HumanFileStatus: "复核通过",
						FirstKindName: this.khbh.FirstKindName,
						SecondKindName: this.khbh.SecondKindName,
						ThirdKindName: this.khbh.ThirdKindName,
						HumanMajorKindName: this.khbh.HumanMajorKindName,
						HunmaMajorName: this.khbh.HumanMajorKindId,
						startDate: this.khbh.deadline,
						endDate: this.khbh.shijian
					}
				})
					.then(res => {
						console.log(res.data);
						tableData.value = res.data;
						drawer.value = true;
					})
					.catch(err => {
						console.log(err);
					})
			}
			const selectid = ref("");
			//查询全部数据
			function fill() {
				if (selectid.value == 3) {
					axios.get('/HF/TiaojianHF', {
						params: {
							HumanFileStatus: "删除中"
						}
					})
						.then(res => {
							console.log(res.data);
							tableData.value = res.data;
							drawer.value = true;
						})
						.catch(err => {
							console.log(err);
						})

				} else {
					axios.get('/HF/TiaojianHF', {
						params: {
							HumanFileStatus: "复核通过"
						}
					})
						.then(res => {
							console.log(res.data);
							tableData.value = res.data;
							drawer.value = true;
						})
						.catch(err => {
							console.log(err);
						})
				}
			}

			//删除
			function sc(row) {
				if (confirm("确认删除编号" + row.hufId + "吗？")) {
					axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
					axios.post('/HF/xiougaiHFHumanFileStatus', {
						HufId: row.hufId,
						HumanFileStatus: "删除中"
					})
						.then(res => {
							if (res.data > 0) {
								alert("编辑成功！")
								fill();
							} else {
								console.log("删除失败或未找到匹配项");
							}
						})
						.catch(err => {
							console.error("删除请求失败", err);
						});
				}
			}

			//恢复`
			function huifu(row) {
				if (confirm("确认删除编号" + row.hufId + "吗？")) {
					axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
					axios.post('/HF/xiougaiHFHumanFileStatus', {
						HufId: row.hufId,
						HumanFileStatus: "复核通过"
					})
						.then(res => {
							if (res.data > 0) {
								alert("编辑成功！")
								fill();
							} else {
								console.log("删除失败或未找到匹配项");
							}
						})
						.catch(err => {
							console.error("删除请求失败", err);
						});
				}
			}

			//点击更改传值过去
			function update(row, extraNumber) {
				let queryString = '?';
				// 遍历row对象的每个属性，并将其添加到查询字符串中
				for (let key in row) {
					if (row.hasOwnProperty(key)) {
						queryString += encodeURIComponent(key) + '=' + encodeURIComponent(row[key]) + '&';
					}
				}
				// 去除最后一个 '&'
				queryString = queryString.slice(0, -1);
				// 额外添加一个数字到查询字符串
				queryString += '&extraNumber=' + encodeURIComponent(extraNumber); //假设extraNumber是数字或可以被转换为字符串

				//添加一个标识数字
				queryString += '&HFid=2';

				// 构建完整的跳转 URL
				let destination = '/HF/HF2' + queryString;
				// 跳转到新页面
				window.location.href = destination;
			}

			// 在组件挂载时开始定时更新
			onMounted(() => {
				//I级下拉框
				fetchFirstKindOptions();
				//职位分类下拉框
				zwfltKindOptions();
				// 获取当前页面的查询参数
				const queryParams = new URLSearchParams(window.location.search);
				// 创建一个空对象来存储解析后的数据
				let rowData = {};
				// 遍历查询参数并解析到 rowData 对象中
				for (const [key, value] of queryParams) {
					// 解码 key 和 value，并存储到 rowData 中
					rowData[decodeURIComponent(key)] = decodeURIComponent(value);
				}

				//获取到标识更改bg的状态
				if (rowData.param == 1) {
					bg.value = true;
					kt.value = "变更";
				} else if (rowData.param == 2) {
					kt.value = "删除";
					sck.value = true;

				} else if (rowData.param == 3) {
					selectid.value = rowData.param;
					kt.value = "恢复";
					huk.value = true;

				}

				// 现在 rowData 对象包含了从上一个页面传递过来的数据
				console.log(rowData);
				console.log("================================+++===================================");
			});

			// I级下拉框选项数据
			let firstKindOptions = ref([]);
			//I级下拉框绑定值
			function fetchFirstKindOptions() {
				axios.get("/EMR/SelectCFFKName")
					.then(function (response) {
						firstKindOptions.value = response.data;
					})
					.catch(function (error) {
						console.error(error);

					});
			}
			//II级机构名称下拉框选项数据
			let aw = ref([]);
			// II级机构名称下拉框绑定值
			function CFSKName() {
				if (!this.khbh.FirstKindName) {
					return;
				}
				axios.get("/EMR/SelectCFSKName?name=" + this.khbh.FirstKindName)
					.then(function (response) {
						aw.value = response.data;
					})
					.catch(function (error) {
						console.error(error);

					});
			}
			//III级机构名称下拉框选项数据
			let sanji = ref([]);
			//III级机构名称下拉框绑定值
			function CFTKName() {
				if (!this.khbh.SecondKindName) {
					return;
				}
				axios.get("/EMR/SelectCFTKName?name=" + this.khbh.SecondKindName)
					.then(function (response) {
						sanji.value = response.data;
					})
					.catch(function (error) {
						console.error(error);

					});
			}
			let zwfl = ref([]);
			// 职位分类编号下拉框绑定值
			function zwfltKindOptions() {
				axios.get('/EMR/SelectCMK')
					.then(res => {
						//console.info(res)
						zwfl.value = res.data;
					})
					.catch(err => {
						console.info(res);
					})
			}
			//存职位编号
			let zwmc = ref([]);
			function CMName() {
				if (!khbh.value.HumanMajorKindId) {
					return;
				}
				axios.get("/EMR/SelectCM2Name?name=" + encodeURIComponent(khbh.value.HumanMajorKindId))
					.then(function (response) {
						zwmc.value = response.data;
					})
					.catch(function (error) {
						console.error(error);
					});
			}

			return {
				khbh,
				drawer,
				cx,
				tableData,
				update,
				bg,
				firstKindOptions,
				fetchFirstKindOptions,
				aw,
				CFSKName,
				sanji,
				CFTKName,
				dialogVisible,
				zwfl,
				zwfltKindOptions,
				zwmc,
				CMName,
				fill,
				kt,
				huk,
				sck,
				huifu,
				sc,
				selectid,
			}
		}
	});
	app.use(ElementPlus)
	app.mount('#app')

</script>

<style scoped>

	.fixed-button {
		position: fixed;
		bottom: 20px;
		right: 20px;
	}

	#app {
		position: relative; /* 确保内部元素定位相对于该容器 */
		margin-bottom: 5px; /* 根据需要调整间距 */
		height: 100vh; /* 视口高度 */
		overflow-y: auto; /* 允许垂直滚动 */
	}

	#firstKind {
		height: 100px;
		width: 30%;
	}

	.el-select .el-select-dropdown {
		display: block !important;
	}

	textarea {
		border: solid 1px black;
		width: 1000px;
		height: 80px;
	}

	.tableEdit {
		border: solid 1px #B5D6E6;
		border-collapse: collapse;
		width: 100%;
		/*margin: 25px;*/
		height: 380px;
	}

		.tableEdit th {
			text-align: right;
			padding: 4px 7px;
			border: solid 1px #B5D6E6;
			width: 200px;
			background-color: #f4f4f4;
		}

		.tableEdit td {
			text-align: left;
			padding: 17px 4px;
			border: solid 1px #B5D6E6;
		}

		.tableEdit thead {
			border: solid 1px #B5D6E6;
			/* background-color: #FFD553; */
			padding: 4px;
			font-weight: bold;
		}

</style>



